<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>
<html>
	<head>
		<style>可选文本框 v1</style>
		<meta charset="utf-8"/>
		<script type="text/javascript">
			// 实现一个可选本框
			// 构造函数
			// 先不考虑原型
			function JUISelectableTextBox(width, height) {
				// 这里是一个富文本编辑器
				// 这个对象包含三个部分
				//	div > pre, textarea
				// 这个对象包含属性
				// text 										// 有默认值
				// left, right 									// 有默认值
				// width, height
				// fontColor, selectedColor, backgroundColor 	// 有默认值
				

				// 这个对象包含方法
				// selectRange(start, length)
				// selectRanges(array: [{start, length}])
				// selectedTexts()

				// 这个对象包含事件?

				// 处理数据
				width = width + "px";
				height = height + "px";

				// 通用框架
				var J = {
					c: function(tagName) {
						return document.createElement(tagName);
					}, 
					css: function(dom, style) {
						var k;
						for (k in style) {
							dom.style[k] = style[k];
						}
					}
				}
				, fontFamily = "arial, 'Hiragino Sans GB', 'Hiragino Sans GB W3', 宋体"
				, fontSize = 50 + "px"
				, fontColor = "#000"
				, selectedColor = "#eee"
				, backgroundColor = "#fff";
				

				// 创建控件
				var div = J.c("div")
					, pre = J.c("pre")
					, textarea = J.c("textarea");

				// 组织 dom 结构
				div.appendChild(pre);
				div.appendChild(textarea);

				// 设置样式
				J.css(div, {
					position: "relative",
					
					backgroundColor: backgroundColor,
					"width": width,
					"height": height,
					padding: 0,
					margin: 0
				});
				J.css(pre, {
					color: "#fff", 	// 测试

					fontFamily: fontFamily,
					"fontSize": fontSize,
					xIndex: 1,

					"width": width,
					"height": height,
					padding: 0,
					margin: 0
				});
				J.css(textarea, {
					position: "absolute",
					left: 0,
					top: 0,

					fontFamily: fontFamily,
					"fontSize": fontSize,
					color: fontColor,
					xIndex: 2,

					backgroundColor: "transparent",

					"width": width,
					"height": height,
					padding: 0,
					margin: 0
				});

				// 添加事件
				textarea.onkeyup = function() {
					// 考虑数字和字母
					// pre.innerHTML = this.value.toString().replace(/([a-zA-Z])/g, '<span style="background-color:pink; color:pink;">$1</span>');

					pre.innerHTML = this.value.toString();
				};


				// 添加方法
				this.selectRange = function(index, length) {
					var temp = "", context = textarea.value.toString();
					for (var i = 0; i < context.length; i++) {
						if (i === index) {
							temp += '<span style="background-color:pink; color:pink;">';
						} 
						if (i === index + length) {
							temp += '</span>';
						}
						temp += context.charAt(i);
					}
					pre.innerHTML = temp;
				}


				this.selectRanges = function(ranges) {
					var temp = "", context = textarea.value.toString();

					function isStrat(i) {
						for (var j = 0; j < ranges.length; j++) {
							if (i === ranges[j].index) return true;
						}

						return false;
					}
					function isEnd(i) {
						for (var j = 0; j < ranges.length; j++) {
							if (i === ranges[j].index + ranges[j].length) return true;
						}

						return false;
					}

					for (var i = 0; i < context.length; i++) {
						if (isStrat(i)) {
							temp += '<span style="background-color:pink; color:pink;">';
						} 
						if (isEnd(i)) {
							temp += '</span>';
						}
						temp += context.charAt(i);
					}

					


					
					pre.innerHTML = temp;
				}

				this.elem = div;
			}

			var text;
			function click1() {
				text = new JUISelectableTextBox(700, 200);
				document.body.appendChild(text.elem);
			}

			function click2() {
				text.selectRanges([
					{index: 2, length: 2}
					, {index: 5, length: 1}
					, {index: 9, length: 3}  
				]); 
			}

		</script>
	</head>
	<body>
		<input type="button" value="点击1" onclick="click1();"/>
		<input type="button" value="点击2" onclick="click2();"/>
		<br />
	</body>
</html>